<template>
  <div>
    <div v-loading="pageLoading" class="game_page">
      <div class="confirmInfo_title gl_clear">
        <div class="gl_fl">我申办的分站赛</div>
        <div class="gl_fr entry_btn" @click="applyNewSubstation">申办新的比赛</div>
      </div>
      <ul class="gl_clear">
        <li v-for="(item, index) in myCompetitionList" :key="index" class="substation_wrap gl_fl">
          <div class="substation_left gl_fl">
            <div class="substation_img_wrap">
              <img :src="getStaticFileUrl(item.logoImage || item.delegation.imagePath)" @error="errorPhoto">
            </div>
            <el-button v-if="item.approveStatusCode === 'ApproveFailed'" :loading="editLoading" style="width:64px" size="small" type="primary" @click="jumpToEdit(item)">编辑</el-button>
            <el-button v-if="item.approveStatusCode === 'ApproveSuccess'" style="width:64px" size="small" type="primary" @click="jumpToBackstage">后台</el-button>
          </div>
          <div class="substation_content gl_fl">
            <h3 class="substation_title" :title="item.leagueName + '-' + item.name">{{ item.leagueName }}-{{ item.name }}</h3>
            <ul>
              <li class="substation_item">
                <span class="substation_item_label">比赛时间</span>
                <span class="substation_item_text">{{ item.startTime ? item.startTime.slice(0, 10) : '-' }} 至 {{ item.endTime ? item.endTime.slice(0, 10) : '-' }}</span>
              </li>
              <li class="substation_item">
                <span class="substation_item_label">认证等级</span>
                <span class="substation_item_text">{{ item.competitionCertificationLevelName }}</span>
              </li>
              <li class="substation_item">
                <span class="substation_item_label">比赛地址</span>
                <span class="substation_item_text">{{ item.address }}</span>
              </li>
              <li class="substation_item">
                <span class="substation_item_label">负责人</span>
                <span class="substation_item_text">{{ item.responsiblePersonName }}</span>
              </li>
              <li class="substation_item">
                <span class="substation_item_label">联系电话</span>
                <span class="substation_item_text">{{ item.responsiblePersonPhone }}</span>
              </li>
              <li class="substation_item">
                <span class="substation_item_label">申请机构</span>
                <span class="substation_item_text">{{ item.enterDelegationName }}</span>
              </li>
            </ul>
          </div>
          <div class="status_img">
            <img :src="approveStatusImg[item.approveStatusCode]">
          </div>
        </li>
        <li v-if="!myCompetitionList.length" class="no_substation">
          <span>暂无申办的分站赛，快去申办新的比赛吧。</span>
        </li>
      </ul>
    </div>

    <editSubstation ref="refEditSubstation" :game-info="gameInfo" @reGetMyCompetitionRequest="reGetMyCompetitionRequest" />
  </div>
</template>

<script>
import { mapState } from 'vuex';

import imgReview from '@/assets/images/league/review.png';
import imgTurndown from '@/assets/images/league/turndown.png';
import imgCompleted from '@/assets/images/league/completed.png';
import defaultPhoto from '@/assets/images/face_default.png';

import editSubstation from './components/editSubstation.vue';

import {
  api_GET_EventsManagementCompetitionRequestMyCompetitionRequestLeagueCompetitionId, // 分页查询我的分站赛申请列表（C端）
  api_GET_EventsManagementCompetitionRequestCompetitionRequestCompetitionRequestId // 根据申请Id获取申请的信息
} from '@/extend/api/gameswaggerApi/app';

export default {
  components: {
    editSubstation
  },
  props: {
    gameInfo: {
      type: Object,
      default () {
        return {};
      }
    }
  },
  data () {
    return {
      leagueRoute: '', // 联赛路由
      leagueId: '', // 联赛ID
      pageLoading: true, // 页面Loading
      myCompetitionList: [], // 我身办的分站赛列表
      approveStatusImg: { // 审核状态对应的图片
        NotApproved: imgReview,
        ApproveSuccess: imgCompleted,
        ApproveFailed: imgTurndown,
        UnderReview: imgReview
      },
      defaultPhoto: defaultPhoto,
      editLoading: false
    };
  },
  computed: {
    ...mapState({
      currentUserType: state => state.user.currentUserType
    })
  },
  watch: {
    'currentUserType': {
      immediate: true,
      deep: true,
      handler(val) {
        if (val) {
          if (val.delegationId && val.organizationUnitId) {
            // 新建的用户，如果没有完善信息，则没有delegationId
            this.reGetMyCompetitionRequest();
          } else {
            this.pageLoading = false;
          }
        }
      }
    },
    gameInfo: {
      immediate: true,
      deep: true,
      handler(val) {
        if (val.id) {
          this.reGetMyCompetitionRequest();
        }
      }
    }
  },
  created () {
    this.leagueRoute = this.$route.params.id;
    this.leagueId = this.$route.query.id;
  },
  methods: {
    // 申办新的比赛
    applyNewSubstation () {
      this.$router.push({
        name: 'Enter',
        query: { id: this.leagueId }
      });
    },
    reGetMyCompetitionRequest () {
      if (this.gameInfo.id && this.currentUserType && this.currentUserType.delegationId) {
        this.apiMyCompetitionRequest(this.gameInfo.id, {
          DelegationId: this.currentUserType.delegationId,
          OrganizationId: this.currentUserType.organizationUnitId,
          IncludeCertificationLevel: true, // 后端要求传true
          IncludeDelegation: true, // 后端要求传true
          IncludeLeagueCompetition: true // 后端要求传true
        });
      }
    },
    // 分页查询我的分站赛申请列表（C端）
    apiMyCompetitionRequest (id, vo) {
      this.pageLoading = true;
      api_GET_EventsManagementCompetitionRequestMyCompetitionRequestLeagueCompetitionId(id, vo)
        .then(
          res => {
            this.myCompetitionList = res.items;
            this.pageLoading = false;
          }
        )
        .catch(
          error => {
            this.pageLoading = false;
            this.$message({
              message: `获取分站赛列表失败 ${error.error.message}`,
              type: 'error',
              showClose: true
            });
          }
        );
    },
    // 转到编辑
    jumpToEdit (item) {
      if (this.gameInfo || this.gameInfo.id) {
        this.apiSubstationInfo(item.id);
      } else {
        this.$message({
          message: `未找到赛事信息`,
          type: 'error',
          showClose: true
        });
      }
    },
    apiSubstationInfo (id) {
      this.editLoading = true;
      api_GET_EventsManagementCompetitionRequestCompetitionRequestCompetitionRequestId(id)
        .then(
          res => {
            this.editLoading = false;
            this.$refs.refEditSubstation.open(res);
          }
        )
        .catch(
          error => {
            this.editLoading = false;
            this.$message({
              message: `获取分站赛信息失败 ${error.error.message}`,
              type: 'error',
              showClose: true
            });
          }
        );
    },
    // 跳转至后台
    jumpToBackstage () {
      const tenantId = this.$route.params.id.split('_')[1] || '';
      const _origin = window.location.origin;

      var a = document.createElement('a');
      var event = new MouseEvent('click');
      a.href = `${_origin}/#/t__${tenantId}/game/manage/league/${this.leagueId}/substation`;
      a.target = '_blank';
      a.dispatchEvent(event);
    },
    // 错误图片处理
    errorPhoto() {
      const img = event.srcElement;
      img.src = this.defaultPhoto;
      img.onerror = null;
    },
    getStaticFileUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    }
  }
};
</script>

<style lang="scss" scoped>
  .game_page {
    position: relative;
    min-height: 572px;
    padding: 20px 60px 130px;
  }
  .confirmInfo_title {
    position: relative;
    height: 32px;
    margin-bottom: 24px;
    line-height: 32px;
    font-size: 18px;
    font-weight: bold;
    color: #353434;
  }
  .confirmInfo_title::after {
    display: block;
    content: "";
    position: absolute;
    left: -22px;
    top: 0;
    width: 6px;
    height: 32px;
    border-radius: 4px;
    background-color: #E02020;
  }

  .substation_wrap {
    position: relative;
    box-sizing: border-box;
    margin-right: 8px;
    margin-bottom: 20px;
    width: 536px;
    height: 268px;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.10);
  }
  .substation_wrap:nth-child(even) {
    margin-right: 0;
  }
  .substation_left {
    box-sizing: border-box;
    height: 100%;
    margin-right: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 14px;
  }
  .substation_content {
    width: 375px;
  }
  .substation_img_wrap {
    width: 100px;
    height: 100px;
  }
  .substation_img_wrap img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
  .substation_title {
    height: 48px;
    margin: 0 0 2px;
    padding: 0;
    font-size: 18px;
    line-height: 24px;
    color: #000;
    font-weight: 600;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .entry_btn {
    width: 140px;
    height: 32px;
    background: #dc1d1d;
    border-radius: 8px;
    font-size: 14px;
    line-height: 32px;
    font-weight: normal;
    color: #fff;
    cursor: pointer;
    text-align: center;
    transition: all 0.3s ease;
    display: inline-block;
  }
  .entry_btn:hover {
    opacity: 0.8;
  }

  .substation_item {
    height: 24px;
    margin-bottom: 4px;
    line-height: 24px;
    font-size: 14px;
  }
  .substation_item_label {
    display: inline-block;
    width: 4em;
    margin-right: 26px;
    text-align: right;
    vertical-align: middle;
    color: #828282;
  }
  .substation_item_text {
    display: inline-block;
    width: 200px;
    vertical-align: middle;
    color: #353434;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .no_substation {
    width: 100%;
    padding-top: 150px;
    font-size: 14px;
    text-align: center;
    color: #828282;
  }

  .status_img {
    position: absolute;
    right: 20px;
    bottom: 15px;
  }
</style>
